<template>
  <div class="cart">
    <!-- 顶部导航开始 -->
    <div class="navbar">
      <mt-header title="购物车">
        <!-- <span slot="right" v-if="handle" @click="handle">管理</span>
        <span slot="right" v-else @click="handle">删除</span> -->
      </mt-header>
      <div class="sale">
        <div class="sale-title">
          <img src="../assets/imgs/cart/laba.png" alt="" />
          每月<span>0.99</span>元，抢购<span>88</span>元红包套餐
        </div>
        <div class="sale-btn">
          <span>立即抢购</span>
          <img src="../assets/imgs/cart/icon_arrow_right.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 顶部导航结束 -->
    <!-- 购物车面板开始 -->
    <div class="container">
      <!-- 商品列表 -->
      <div class="list">
        <div class="list-spec" v-for="(item, index) of this.phone" :key="index">
          <div class="spec-left">
            <div
              id="checked"
              :class="!item.status ? 'unchecked' : 'checked'"
              @click="checked(index)"
            ></div>
            <img :src="item.imgSrc" alt="" width="80px" />
          </div>
          <div class="spec-right">
            <div class="list-title">
              {{ item.title }}
            </div>
            <div class="list-price">
              <span>¥{{ item.price }}</span>
              <div>
                <div @click="prevCount(item.count, index)">-</div>
                <input type="text" v-model="item.count" />
                <div @click="addCount(item.count, index)">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 结算 -->
      <div class="account">
        <div class="all-check">
          <input type="checkbox" @change="allCheck" v-model="isAll" />
          全选
        </div>
        <div>
          <div class="total">
            合计：
            <span>¥{{ total }}元</span>
          </div>
          <div class="btn-account">
            结算
            <span>({{ number }})</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车面板结束 -->
    <!-- 底部选项卡开始 -->
    <Tabbar :selected="tab"></Tabbar>
    <!-- 底部选项卡结束 -->
  </div>
</template>

<script>
import Tabbar from "../components/childs/tabbar";
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      tab: "cart",
      handle: true,
      isCheck: false,
      data: [
        {
          id: 1,
          title: "华为 HUAWEI P40 Pro 全网通5G手机 双卡双待",
          price: "5000.00",
          imgSrc: "index/product_List/164_honor_Mate30Pro.jpg",
          status: false,
          count: 1,
        },
        {
          id: 2,
          title: "华为 HUAWEI P40 Pro 全网通5G手机 双卡双待",
          price: "5000.00",
          imgSrc: "index/product_List/164_honor_Mate30Pro.jpg",
          status: false,
          count: 2,
        },
        {
          id: 3,
          title: "华为 HUAWEI P40 Pro 全网通5G手机 双卡双待",
          price: "5000.00",
          imgSrc: "index/product_List/164_honor_Mate30Pro.jpg",
          status: false,
          count: 3,
        },
      ],
      phone: [],
      number: 0,
      total: 0,
      isAll: false,
    };
  },
  mounted() {
    this.data.forEach((item) => {
      if (item.imgSrc != null) {
        item.imgSrc = require("../assets/imgs/" + item.imgSrc);
      }
      this.phone.push(item);
    });
  },
  methods: {
    checked(index) {
      // console.log(index);
      if (this.phone[index].status) {
        this.total -= this.phone[index].price * this.phone[index].count * 1;
        this.number -= this.phone[index].count;
      } else {
        this.number += this.phone[index].count;
        this.total += this.phone[index].price * this.phone[index].count * 1;
      }
      this.phone[index].status = !this.phone[index].status;
      // console.log(this.phone[index].status);
      let Num = 0;
      this.phone.forEach((item) => {
        Num += item.count * 1;
      });
      if (this.number == Num) {
        this.isAll = true;
      } else {
        this.isAll = false;
      }
    },
    allCheck() {
      if (this.isAll) {
        this.phone.forEach((item) => {
          item.status = true;
          this.number += item.count;
          this.total += item.price * 1 * item.count;
        });
      } else {
        this.phone.forEach((item) => {
          item.status = false;
          this.number = 0;
          this.total = 0;
        });
      }
    },
    prevCount(count, index) {
      if (count > 1) {
        this.phone[index].count -= 1;
        this.number = 0;
        this.total = 0;
        if (this.isAll) {
          this.phone.forEach((item) => {
            this.total += item.count * item.price * 1;
            // console.log(this.total);
            this.number += item.count;
          });
        } else {
          this.phone.forEach((item) => {
            if (item.status) {
              this.number += item.count;
              this.total += item.count * item.price * 1;
              // console.log(this.total);
            }
          });
        }
      }
    },
    addCount(count, index) {
      this.phone[index].count = count * 1 + 1;
      this.total = 0;
      this.number = 0;
      if (this.isAll) {
        this.phone.forEach((item) => {
          this.total += item.count * item.price * 1;
          // console.log(this.total);
          this.number += item.count;
        });
      } else {
        this.phone.forEach((item) => {
          if (item.status) {
            this.number += item.count * 1;
            this.total += item.count * item.price * 1;
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.cart {
  width: 100%;
}
.sale {
  background-color: #f9f9f9;
  padding: 5px 10px;
  font-size: 12px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.sale-title {
  color: #333;
}
.sale-title span {
  color: #f00;
  display: inline-block;
  padding: 0 2px;
}
.sale-btn {
  display: flex;
}
/* 面板开始 */
.container {
  margin: 85px 0 70px;
}
.list {
  padding: 10px;
  box-shadow: 0 0 5px #e9e9e9;
}
.list-spec {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e9e9e9;
}
.spec-left {
  flex-basis: 30%;
  display: flex;
  align-items: center;
}
.spec-left .unchecked {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #999;
}
.spec-left .checked {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: url("../assets/imgs/cart/checked.png") no-repeat center center;
}
.spec-right {
  flex-basis: 70%;
}
.list-title {
  width: 240px;
  font-size: 14px;
  color: #222;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.list-price {
  display: flex;
  justify-content: space-between;
  margin: 0 10px;
}
.list-price span {
  font-size: 16px;
  color: #f00;
  font-weight: 600;
  margin-top: 20px;
}
.list-price > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.list-price div input {
  width: 30px;
  height: 20px;
  outline: none;
  border: 0;
  text-align: center;
}
.list-price div div {
  width: 20px;
  height: 20px;
  line-height: 21px;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  text-align: center;
  font-size: 0.34rem;
}
.account {
  width: 100%;
  height: 50px;
  background-color: #f9f9f9;
  position: fixed;
  left: 0;
  bottom: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e9e9e9;
}
.all-check {
  padding-left: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.all-check input {
  margin: 0 10px;
  border-radius: 50%;
  overflow: hidden;
}
.account > div {
  display: flex;
  align-items: center;
}
.total {
  margin-right: 10px;
  font-size: 14px;
}
.total > span {
  color: #f00;
  font-size: 1.3em;
}
.btn-account {
  padding: 5px 20px;
  height: 40px;
  line-height: 40px;
  background-color: #26a2ff;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
</style>
